<template>
  <div>
    <!-- TODO:offset去掉 -->
    <div
      v-if="ClassList.length > 0"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="10"
        finished-text="— 没有更多了 —"
        class="class-list"
        @load="getClassList"
      >
        <signatureClass
          v-for="classItem in ClassList"
          :key="classItem.ClassId"
          :item="classItem"
          :fun="'isClassList'"
          :user-scholarship="userScholarship"
        />
      </van-list>
    </div>
    <div
      v-else-if="ClassList.length <= 0 && finished"
      class="no-class"
    >
      <img
        class="no-img"
        src="~assets/class/no_data.png"
        alt="暂无相关班级"
      >
      <span class="no-text">
        暂无相关班级
      </span>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    signatureClass: () => import('components/Home/SignatureClass.vue'),
  },
  props: {
    categoryId: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      ClassList: [],
      pageSize: 6,
      pageNum: 1,
      loading: true,
      finished: false,
      userScholarship: '0.00',
      scholarFinished: false,
    }
  },
  created () {
    this.getClassList()
  },
  methods: {
    // 获取奖学金详情
    getUserScholarshipDetail () {
      this.$axios({
        method: 'get',
        url: 'User/GetUserScholarship',
      }).then(res => {
        this.userScholarship = res.UserScholarship
        this.scholarFinished = true
      })
    },
    // 获取班级列表
    getClassList () {
      this.$axios({
        url: 'course/getClassCourseListForWeb',
        data: {
          Page: this.pageNum,
          PageSize: this.pageSize,
          CategoryId: this.categoryId,
          // CategoryId: 2839,
          SearchKey: 1,
          IsRecommend: 2,
          IsBuy: 2,
          IsHaveVideoLive: 2,
          IsAudition: 2,
          IsHasOffLineClass: 2,
        },
      }).then(res => {
        this.$set(this.$data, 'ClassList',
          [...this.ClassList, ...res.ClassList])
        this.loading = false

        if (this.pageNum >= res.SumPage) {
          this.finished = true
        } else {
          this.pageNum++
        }
        console.log('班级列表', res)
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.class-list {
  padding: 50px 24px 0;
  // padding-top: 50px;
  background-color: #fff;
}
.no-class {
  text-align: center;
  font-size: 36px;
  color: #666666;
  margin: 120px 0;
  .no-img {
    width: 150px;
    height: 250px;
  }
  .no-text {
    margin-top: 9px;
    display: block;
  }
}
</style>
